<template>
  <div class="view">
    <div class="header">
        <div class="title">
              <div class="logo1">欢迎访问5G与物联网研究中心！</div>
              <div class="logo2" @click="login">网站管理登录</div>
        </div>

		
        <div class="image">
              <img src="@/assets/img/2.png"/>
        </div>       
   

      <div class="nav"> 
              <!-- <el-menu
                class="el-menu-demo"               
                mode="horizontal"         
                background-color="#fff"
                text-color="#000"
                active-text-color=""> 
                <el-menu-item index="1" @click="welcome">首页</el-menu-item>      
                <el-menu-item index="2" @click="brief">中心概括</el-menu-item>  
                <el-menu-item index="3" @click="teacher">师资队伍</el-menu-item>                
                <el-submenu index="4">
                  <template slot="title">人才培养</template>
                  <el-menu-item index="4-1" @click="college"><div class="college">本科教学</div></el-menu-item>
                  <el-menu-item index="4-2" @click="graduate">研究生教学</el-menu-item>         
                </el-submenu>              
                <el-menu-item index="5"><div @click="comunicate">交流合作</div></el-menu-item>
                <el-menu-item index="6"><div @click="technoloage">科学研究</div></el-menu-item>
              </el-menu>      -->

          <div class="nav5" @click="welcome">首页</div>
          <div class="nav1" @click="brief">中心概括</div>
          <div class="nav1" @click="teacher">师资队伍</div>
          <div class="nav1">
            <div class="nav2" @click="college">人才培养<i class="el-icon-arrow-down"></i></div>
            <div class="nav3">
              <div class="nav4"  @click="college">本科教学</div>
              <div class="nav4" @click="technoloage">研究生教学</div>
            </div>
          </div>
          <div class="nav1" @click="comunicate">交流合作</div>
          <div class="nav1" @click="technoloage">科学研究</div>
      </div>    
		</div>

      
      <div class="center1">
        <keep-alive><router-view @getstate="show1"></router-view></keep-alive>
      </div>
      
      <div class="bottom">
        <div class="footer">
          <p>
            <span>版权所有：榆林学院</span>
            &nbsp;&nbsp;&nbsp;电话:0912-3893644 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;招生电话:0912-3896517
            &nbsp;&nbsp;&nbsp;地址:陕西省榆林市崇文路51号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱:719000
          </p>
      </div>
      </div>
  </div>
</template>

<script>
import '@/assets/js/index.js'
export default {
    data(){
      return {
        val:false
      }
    },
    mounted(){
    },

    methods:{
      show1(val){
        // console.log(val)
        this.val=val
        // this.$emit('showbox',this.val)
        this.val=false
      },
      login(){       
        this.$router.push('/views/login')
      },
      welcome(){
        this.$router.push('/welcome')
      },
      comunicate(){
        this.$router.push('/comunicate')
        // this.$emit('showbox',this.val)
      },
      brief(){
        this.$router.push('/brief')
        // this.$emit('showbox',this.val)
      },
      teacher(){
        this.$router.push('/teacher')
        // this.$emit('showbox',this.val)
        // this.reload()
      },
      college(){
        this.$router.push('/college')
        // this.$emit('showbox',this.val)
      },
      graduate(){
        this.$router.push('/graduate')
        // this.$emit('showbox',this.val)
      },
      technoloage(){
        this.$router.push('/Technoge')
        // this.$emit('showbox',this.val)
      }
    }
}
</script>

<style lang="less" scoped>
.view{
  .college{
    font-size: 200px;
  }
  width: 100%;
//   .el-menu-item{
//      font-size: .375rem;
//     font-weight: 450;
//     height: .5rem;
//     line-height: .5rem;
//     margin:.1rem .3125rem .1rem 0!important;
//   }
//   .el-submenu /deep/ .el-submenu__title{
//      font-size: .375rem;
//     font-weight: 450;
//      height: .5rem;
//       line-height: .5rem;
//     margin:.1rem .3125rem .1rem 0!important;
    
//   }
//  .el-submenu /deep/  .el-submenu__icon-arrow{
//    font-size: .375rem;
   
//  } 

//  .el-submenu /deep/ .el-icon-arrow-down{
//    font-size: .375rem;
//  }

   .header{
     .title{
       display: flex;
       background-color: #f8f8f8;
      justify-content: space-around;
      padding: .1rem 0 .1rem 0;
       .logo1{
         color:#888888;
         font-size: 0.25rem;
       }
       .logo2{
         cursor: pointer;
         color:purple;
         font-weight: 300;
         font-size: 0.25rem;
         
       }
       .logo2:hover{
           color:rgb(86, 38, 216);
         }
     }
     .image{
       justify-content: center;
       display: flex;
       align-items: center;    
       img{
         width: 100%;
       }
       .title_img{
          margin-left: .1rem;
       }
     }

     .nav{
       display: flex;
       justify-content: center;
       background-color: #fff;
       font-size: .3rem;
       text-align: center;
       .nav1:hover{
        color: #fff;
        cursor: pointer;
          .nav3{
            display: block;
            position: absolute;
            background-color: #BC121A;
            padding: .1rem 0 .1rem 0;
            z-index: 999;
            width: 1.7rem;
            .nav4{
              padding: .1rem 0 .1rem 0;
            }
          }
        }
        .nav5:hover{
           background-color: #BC121A;
           color:#fff;
           cursor: pointer;
        }
        .nav5{
          margin-top: 0.125rem;
          width: 1rem;
          height: .5rem;
          padding-top: .1rem;
        }
       .nav1{
        margin-top: 0.125rem;
        width: 1.7rem;
        height: .5rem;
        padding-top: .1rem;
        
        .nav3{
          display: none;
        }
       }
       .nav1:hover{ 
        background-color: #BC121A;
       }
     }
   }
   .center1{
    margin-top: 10px;
   }
   .bottom{
     .footer{
     display: flex;
     font-size: 0.25rem;
     height: .625rem;
     color: #fff;
     justify-content: center;
     align-items: center;
     background-color: #BC121A; 
     margin-top: .3rem;
     padding: 5px;  
     p{
       background-color: #BC121A;
       span{
         padding-left: 1rem;
       }
     }
   }
   }
 }
</style>